<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP
        CSS 属性 shape-outside 定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。

        TIP
        shape-outside 属性指定使用下面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形状。

        /* 关键字值 */
        shape-outside: none;
        shape-outside: margin-box;
        shape-outside: content-box;
        shape-outside: border-box;
        shape-outside: padding-box;

        /* 函数值 */
        shape-outside: circle();
        shape-outside: ellipse();
        shape-outside: inset(10px 10px 10px 10px);
        shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

        /* <url> 值 */
        shape-outside: url(image.png);
        
        /* 渐变值 */
        shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
    -->

    <style>
        .circle {
          width: 50px;
          height: 50px;
          background-color: red;
          border: 30px solid blue;
          padding: 10px;
          margin: 30px;
          border-radius: 50%;
          /* 浮动 */
          float: left;
          /* 将属性值更换为以下值，查看效
              none,margin-box,border-box,padding-box,content-box
              */
          shape-outside: border-box;
        }
      </style>
      
      <div class="container">
        <div class="circle"></div>
        <p>
          shape-outside 的 CSS
          属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框;
          shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
        </p>
        <p>
          shape-outside 的 CSS
          属性定义了一个可以是非矩形的形状，相邻的内联内容应围绕该形状进行包装。默认情况下，内联内容包围其边距框;
          shape-outside提供了一种自定义此包装的方法，可以将文本包装在复杂对象周围而不是简单的框中。
        </p>
      </div>
</body>
</html>